<template>
	<view class="container">
		<view class="titleTop">
			<view class="input">
				<uni-data-select class="selectA" v-model="active" :localdata="range"></uni-data-select>
			</view>
			<view class="topCenter">锦鲤服务商</view>
			<view class="topRight" @click="Normal">
				普通用户
			</view>
		</view>
		<view class="number">
			<view>
				<text class="numTitle">订单数量</text>
				<text class="numContent">101</text>
			</view>
			<view>
				<text class="numTitle">KOI收购数量</text>
				<text class="numContent">11000</text>
			</view>
			<view>
				<text class="numTitle">USDT支出数量</text>
				<text class="numContent">210W</text>
			</view>
		</view>
		<view class="titleList">订单列表</view>
		<view class="List">
			<view class="ListLi">
				<view class="topLi"><text class="titleLi">收购KOI</text><text class="success">交易完成</text></view>
				<view class="content">
					<view>
						<text class="num">1000</text>
						<text class="tips">KOI收购数量</text>
					</view>
					<view>
						<text class="num">10313</text>
						<text class="tips">USDT支出数量</text>
					</view>
				</view>
				<view class="time">2023年10月15日 00：33：06</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { showDialog } from 'vant';

	import { ref } from 'vue';
	//日期数据
	let active = ref(0)
	// 列表
	const range = ref([
		{ value: 0, text: "12.19" },
		{ value: 1, text: "12.18" },
		{ value: 2, text: "12.17" },
	])
	
	const Normal = ()=>{
		showDialog({
		  message: '确认退出服务商',
		  theme: 'round-button',
		}).then(() => {
		  // on close
		  uni.switchTab({
		  	url:'/pages/index/index'
		  })
		});
	}
</script>

<style lang="scss" scoped>
	::v-deep.van-dialog__message{
		font-size: 50px;
	}
	.container {
		// --van-dialog-background	: rad;
		color: white;
		height: 100vh;
		width: 100%;
		background: url('../../static/images/service/home/BannerBGC.png');
		background-size: 100% 424px;
		background-repeat: no-repeat;

		.titleTop {
			height: 88px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.selectA {
				width: 109px;
				height: 48px;
				border-radius: 8px;
				border: 1px solid #FFF9EF;
			}

			.topRight {
				height: 58px;
				width: 188px;
				line-height: 58px;
				text-align: center;
				font-size: 24px;
				font-weight: 600;
				background: url('../../static/images/service/home/Bgc.png');
				background-size: 100% 100%;
			}

			.topCenter {
				background: radial-gradient(#ECE4CA 0%, #FFF9EF 28%, #FFF9EF 34%, #B1997B 100%);
				-webkit-background-clip: text;
				color: transparent;
				font-size: 36px;
				font-family: HYk2gj;
				line-height: 48px;
				font-weight: 600;

			}

			.input {
				margin-left: 32px;
			}
		}

		.number {
			width: 100%;
			height: 180px;
			display: flex;
			justify-content: space-between;
			padding: 68px 50px 0;
			box-sizing: border-box;

			&>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.numTitle {
					font-size: 24px;
					color: white;
				}

				.numContent {
					font-size: 40px;
					color: white;
				}
			}
		}

		.titleList {
			font-size: 36px;
			margin-top: 131px;
			margin-left: 32px;
		}

		.List {
			padding: 40px 32px;

			.ListLi {
				padding: 32px;
				border-radius: 16px;
				background: #2a2b2e;

				.topLi {
					display: flex;
					justify-content: space-between;

					.titleLi {
						font-size: 28px;
						color: white;
					}

					.success {
						color: red;
						font-size: 24px;
					}
				}

				.content {
					display: flex;
					justify-content: center;
					padding: 32px 0;

					view {
						width: 50%;
						height: 90px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.num {
							font-size: 40px;
						}

						.tips {
							font-size: 24px;
						}

						&:nth-of-type(1) {
							border-right: 1px solid #cccccc;
						}
					}

				}

				.time {
					color: #cccccc;
					text-align: center;
					font-size: 24px;
				}
			}
		}
	}

	::v-deep.uni-stat-box {
		border: none;

		.uni-select {
			border: none;

			.uni-select__input-text {
				color: white;
			}
		}
	}
	::v-deep.uni-select__selector{
		background-color: transparent;
	}
	// ::v-deep.van-dialog__header--isolated{
		
	// }
</style>